<html>
<head>
	<script type="text/javascript" src="js/d3.js"></script>
	<script type="text/javascript" src="js/d3.tip.js"></script>
	<script type="text/javascript" src="js/d3.js"></script>
	<script type="text/javascript" src="js/nv.d3.js"></script>
	<link rel="stylesheet" type="text/css" href="css/nv.d3.css">
	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

.bar {
  fill: steelblue;
}

.bar2 {
  fill: orange;
}

.bar:hover {
  fill: brown;
}

.bar2:hover {
  fill: brown;
}


.axis {
  /*font: 10px sans-serif;*/
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  /*font-weight: bold;*/
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  /*font-size: 10px;*/
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
body{
 font-size:15px;
 font-family:AngsanaUPC;
 color:black;
}

</style>

</head>
<body>
	<div id="test2"></div>
	<div>
		<svg id="chart2" width="10" height="10"></svg>
	</div>
</body>

	<script type="text/javascript">
		
		d3.xhr("http://localhost:8080/WebBIReport/FrmShowStaffAcadByFac",function(error,data){
			var jsonData = eval('(' +data.response+ ')');
			var table = d3.select("#test2")
		    .append("table")
		    .style("border-collapse", "collapse")
		    .style("border", "2px black solid")
	
		    var tHead = table.append("thead");
			tHead.append("tr")
			.selectAll("th")
			.data(d3.values(jsonData[0]))
			.enter()
			.append("th")
			.style("border", "1px black solid")
		    .style("padding", "5px")
			.text(function(d){return d});
			
		    var tBody = table.append("tbody").selectAll("tr")
		    .data(jsonData[1])
		    .enter().append("tr")
		    .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
		    .on("mouseout", function(){d3.select(this).style("background-color", "white")})
	
		    .selectAll("td")
		    .data(function(d){return d3.values(d)})
		    .enter().append("td")
		    .style("border", "1px black solid")
		    .style("padding", "5px")
		    .text(function(d){return d;})
		    .style("font-size", "20px");
		    
		  //Donut chart example
		    nv.addGraph(function() {
		      var chart = nv.models.pieChart()
		          .x(function(d) { return d.facultyName })
		          .y(function(d) { return d.percentage })
		          .showLabels(true)     //Display pie labels
		          .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
		          .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
		          .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
		          .donutRatio(0.35);     //Configure how big you want the donut hole size to be.
		          

		        d3.select("#chart2")
		            .datum(jsonData[1])
		            .transition().duration(350)
		            .call(chart);

		      return chart;
		    });
		});
	</script>
</html>